<template>
  <div>
    <div class="col-md-3 layout-side">
      <div class="panel panel-default panel-userinfo">
        <div class="panel-body body-userinfo">
          <div class="media userinfo-header">
            <div class="media-left">
              <div class="user-avatar">
                <a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
                  <img class="circle" src="/static/img/logo-grey.png" />
                </a>
              </div>
            </div>
            <div class="media-body">
              <span class="media-heading username">欢迎来到实验楼</span>
              <p class="vip-remain">做实验，学编程</p>
            </div>
          </div>

          <div class="row userinfo-data">
            <hr />
            <div class="btn-group-lr" v-if="user_id">
              <router-link to="/Usercenter" class="btn btn-success col-md-5 col-xs-6 login-btn">
                {{username}}
              </router-link>
              <button class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn" @click="Logout">退出</button>
            </div>

            <div class="btn-group-lr" v-else>
              <a
                href="#sign-modal"
                type="button"
                class="btn btn-success col-md-5 col-xs-6 login-btn"
                data-toggle="modal"
                data-sign="signin"
              >登录</a>
              <a
                href="#sign-modal"
                type="button"
                class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn"
                data-toggle="modal"
                data-sign="signup"
              >注册</a>
            </div>
          </div>

          <div class="userinfo-footer row">
            <div class="col-md-6 col-xs-6 pos-left">
              <a href="#sign-modal" data-toggle="modal" data-sign="signin">
                <span class="glyphicon glyphicon-bookmark"></span> 加入私有课
              </a>
            </div>
            <div class="col-md-6 col-xs-6 pos-right">
              <a href="/contribute" target="_blank">
                <span class="glyphicon glyphicon-send"></span> 我要投稿
              </a>
            </div>

            <div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">加入私有课</h4>
                  </div>
                  <div class="modal-body">
                    <div style="margin:15px 0; font:16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                    <form id="private-course-form" method="POST" action="/courses/join">
                      <div class="form-group">
                        <label for="code">邀请码</label>
                        <input class="form-control" id="code" name="code" type="text" value />
                        <input
                          name="_csrf_token"
                          type="hidden"
                          value="1483780974##87f89328c5616669f00302a263fe9061bb852818"
                        />
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button
                      type="button"
                      class="btn btn-primary"
                      onclick="document.getElementById('private-course-form').submit();"
                    >确定</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 
          <div class="sidebox">
            <div class="sidebox-header">
              <h4 class="sidebox-title">最热路径</h4>
            </div>
            <div class="sidebox-body course-content side-list-body">
              <a href="/paths/python">
                <img style="width:25px;height:25px" src="/static/img/1471513769430.png" /> Python 研发工程师
              </a>
              <a href="/paths/bigdata">
                <img style="width:25px;height:25px" src="/static/img/1471513926288.png" /> 大数据工程师
              </a>
              <a href="/paths/cpp">
                <img style="width:25px;height:25px" src="/static/img/1471513793360.png" /> C++ 研发工程师
              </a>
              <a href="/paths/security">
                <img style="width:25px;height:25px" src="/static/img/1471513867033.png" /> 信息安全工程师
              </a>
              <a href="/paths/linuxsys">
                <img style="width:25px;height:25px" src="/static/img/1471514004752.png" /> Linux 运维工程师
              </a>
            </div>
      </div>-->
      <div class="sidebox">
        <div class="sidebox-header">
          <h4 class="sidebox-title">最热路径</h4>
        </div>
        <!-- <div class="sidebox-body course-content side-list-body">
              <a href="/paths/python">
                <img style="width:25px;height:25px" src="../../static/img/1471513769430.png" /> Python 研发工程师
              </a >
        </div>-->
        <div class="sidebox-body course-content side-list-body" v-for="i in datalist">
          <router-link :to="{path:'/showpath',query:{'id':i.id}}">
            <img style="width:25px;height:25px" :src="i.pic" />
            {{i.path}}
          </router-link>
        </div>
      </div>

      <div class="side-image side-qrcode">
        <img src="/static/img/ShiyanlouQRCode.png" />
        <div class="side-image-text">关注公众号，手机看教程</div>
      </div>

      <div class="sidebox">
        <div class="sidebox-header">
          <h4 class="sidebox-title">推荐</h4>
        </div>
        <div class="sidebox-body course-content side-list-body">
          <div v-for=" c in course" :key="c.id">
            <router-link :to="{path:'/showcourse',query:{'id':c.course.id}}">
              <div class="course-img">
                <img alt :src="c.course.pic" width="80" height="80" />
                {{c.course.title}}
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "hotpath",
  data: function() {
    return {
      username:localStorage.getItem("username"),
      course: [
        {
          course: {
            id: 55,
            created_time: "2019-10-22T17:13:01.453841",
            updated_time: "2019-10-22T19:01:14.826205",
            title: "JAVA编程基础",
            pic:
              "http://www.gentlener.com:8888/group1\\M00/00/02/rB_pcV2ux46AT2wRAAFJpw1U4xI747.png",
            info:
              "Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。",
            online: 0,
            member: 56,
            attention: 3333,
            learn: 2307,
            comment_num: 0,
            recommended: "0",
            detail:
              "Java可运行于多个平台，如Windows, Mac OS，及其他多种UNIX版本的系统",
            section_num: 2,
            teacher: 6,
            path: 26,
            pathstage: 15,
            tag: 3
          }
        },
        {
          course: {
            id: 62,
            created_time: "2019-10-22T18:56:10.992887",
            updated_time: "2019-10-23T09:03:19.490981",
            title: "C++ 解决迷宫问题",
            pic:
              "http://www.gentlener.com:8888/group1\\M00/00/02/rB_pcV2u4ByAM33VAAMxUiI2psM744.png",
            info:
              "本课程通过 C++ 实现了一个迷宫游戏，游戏不仅涉及到简单的 C++ 游戏思想，还涉及到深度优先遍历算法。适合具有 C++ 基础的同学进行练习巩固知识。",
            online: 0,
            member: 55,
            attention: 32535,
            learn: 1353,
            comment_num: 0,
            recommended: "0",
            detail:
              "本课程通过 C++ 实现了一个迷宫游戏，游戏不仅涉及到简单的 C++ 游戏思想，还涉及到深度优先遍历算法。适合具有 C++ 基础的同学进行练习巩固知识。",
            section_num: 2,
            teacher: 8,
            path: 24,
            pathstage: 12,
            tag: 7
          }
        },
        {
          course: {
            id: 61,
            created_time: "2019-10-22T18:53:31.995413",
            updated_time: "2019-10-23T09:02:06.499519",
            title: "HTML5 基础教程",
            pic:
              "http://www.gentlener.com:8888/group1\\M00/00/02/rB_pcV2u34SAV9BKAACfYOap_10031.png",
            info:
              "HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。本课程将带领你走进 HTML5 的世界，领略新特性所带来的变化，课程会涉及到 HTML5 视频音频、HTML5 拖放、HTML5 Canvas、HTML5 表单等。",
            online: 0,
            member: 54,
            attention: 12442,
            learn: 1241,
            comment_num: 0,
            recommended: "0",
            detail:
              "HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。本课程将带领你走进 HTML5 的世界，领略新特性所带来的变化，课程会涉及到 HTML5 视频音频、HTML5 拖放、HTML5 Canvas、HTML5 表单等。",
            section_num: 2,
            teacher: 5,
            path: 28,
            pathstage: 20,
            tag: 22
          }
        }
      ],
      datalist: [],
      user_id: localStorage.getItem("user_id")
    };
  },
  mounted() {
    var params = {
      user_id: localStorage.getItem("user_id")
    };
    this.axios({
      url: "/api/gettuijian/",
      method: "post",
      data: params
    }).then(res => {
      if (res.data.code == 200) {
        console.log(res.data.coursetui);
        this.course = res.data.coursetui;
      }
    });
    this.getPathlist();
  },

  methods: {
    getPathlist: function() {
      this.axios({
        url: "/api/pathlimit/",
        mounted: "get"
      }).then(res => {
        this.datalist = res.data.datalist;
      });
    },
    Logout() {
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      alert("退出成功");
      //  window.location.reload();
      this.$router.push({ path: "/" });
    }
  }
};
</script>